/* eslint-disable react/jsx-pascal-case */
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
// import Apartment from "./views/Home/routing/apartment/Apartment";
import { NavLink, Redirect, withRouter } from 'react-router-dom'
import './App.scss';
import './styles/yd-reset.css'
import '../src/styles/iconfont.css'
import Login from "./views/Login/index";
/* 引入路由组件的懒加载 lazy Supense */
import { Suspense } from "react"
import router from './route/index'
import 'antd-mobile/dist/antd-mobile.css';
import Userinfo from '../src/views/News/Userinfo'
import ChatRecords from '../src/views/News/chatRecords'
import Rentlist from '../src/views/Home/routing/rentlist/Rentlist'
import Personal from '../src/views/Home/routing/personal/Personal'
import Find from "./views/Home/routing/find/Find"
import FillInformation_demand from '../src/views/Issue/fillInformation_demand'
import Map from '../src/views/Issue/Map'
import { getUserInfo } from "./api/login";
import { saveUserInfo } from "./redux/actions/login";
// import HouseInfo from './views/Home/components/context/HouseInfo'
import mineRouter from "./route/mineRoute";
import {CacheSwitch, CacheRoute} from 'react-cache-router';

function App(props) {
  let [show, setShow] = useState(false);
  // console.log(2)
  let changeShow = (flag) => {
    //传true则登录成功跳转
    setShow(flag);
    async function getUser(token) {
      // 登录后请求用户信息
      const res = await Promise.resolve(getUserInfo({ oauth_token: token }))
      // 将用户信息存到仓库
      // console.log(res);
      props.saveUserInfo(res.userinfo)
    }
    getUser(localStorage.getItem('token'))
  }
  useEffect(() => {
    //路由路径判断，进入某些页面隐藏底部导航
    if ( ['/HouseInfo','/chatRecords','/Userinfo','/fillInformation_demand'].includes(props.location.pathname) ) {
      document.getElementById('footer') && (document.getElementById('footer').style.display = 'none')
    } else {
      document.getElementById('footer') && (document.getElementById('footer').style.display = 'flex')
    }
  })
  // 进入页面后判断本地缓存是否有登录记录，有则直接登录跳转
  useEffect(() => {
    localStorage.getItem('token') && changeShow(true)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        {show ? (
          <div className="container">
            <div className="box">
              <CacheSwitch>
                {router.map(ele =>
                  <CacheRoute  exact path={ele.path} key={ele.key} render={props => <ele.component {...props} routes={ele.routes} />} />)}
                  <CacheRoute exact path='/Userinfo' children={props => <Userinfo {...props} />} />
                  <CacheRoute exact path='/chatRecords' children={props => <ChatRecords {...props} />} />
                  <CacheRoute exact path='/Map' children={props => <Map {...props} />} />
                  <CacheRoute exact path='/personal' children={props =>{return <Personal {...props} />}} />
                  <CacheRoute exact path='/rentlist' children={props =>{return <Rentlist {...props} />}} />
                  <CacheRoute exact path='/fillInformation_demand' children={props =>{return <FillInformation_demand {...props} />}} />
                  {mineRouter.map(ele => <CacheRoute path={ele.path} key={ele.key} component={ele.component} />)}
                  {/* <CacheRoute exact path='/apartment' children={props => <Apartment {...props} />} /> */}
                  <CacheRoute exact path='/search' children={props => <Find {...props} />} />
                </CacheSwitch>
                  <Redirect to="/Home" />
              </div>
              <footer className='footer' id="footer">
                {router.map((v, i) => {
                  return (
                    i < 5 && (<div className='nav' key={v.key}>
                      <NavLink className='nav-item' to={v.path} >
                        <span className={v.ico}></span>{v.text}
                      </NavLink>
                    </div>)
                  )
                })}
              </footer>
            </div>)
            :
            <CacheRoute path="/" render={props => <Login changeShow={changeShow} {...props} />} />
        }
      </Suspense>
    </div>
  );
}

export default connect((state) => ({ state }), { saveUserInfo })(
  withRouter(App)
);






